<template>
  <el-card class="container" v-loading="loading" style="width: 98%;margin: 20px;font-size: 14px;white-space: nowrap;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="售后退款配置" name="first">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="退货收货人姓名:" prop="consigneeName" class="custom-width-form-item label__label__font">
            <el-input v-model="form.consigneeName" placeholder="请输入退货收货人姓名" class="custom-width-input"/>
            <div class="upload-tip">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员姓名</div>
          </el-form-item>
          <el-form-item label="退货收货人电话:" prop="consigneePhone" class="custom-width-form-item label__label__font">
            <el-input v-model="form.consigneePhone" placeholder="请输入退货收货人电话" class="custom-width-input"/>
            <div class="upload-tip">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的人员电话</div>
          </el-form-item>
          <el-form-item label="退货收货人地址:" prop="consigneeAddress" class="custom-width-form-item label__label__font">
            <el-input v-model="form.consigneeAddress" placeholder="请输入退货收货人地址" class="custom-width-input"/>
            <div class="upload-tip">用户退货退款后台同意之后，显示在退货订单详情显示的接受退货的地址信息</div>
          </el-form-item>
          <el-form-item label="退货理由:" prop="consigneeReason" class="label__label__font">
            <el-input type="textarea" v-model="form.consigneeReason" placeholder="请输入退货理由"></el-input>
            <div class="upload-tip">配置退货理由，一行一个理由</div>
          </el-form-item>
          <el-form-item label="优惠券退还状态:" prop="couponRefundStatus" class="label__label__font">
            <el-radio-group v-model="form.couponRefundStatus">
              <el-radio :label="1" :key="1">退还</el-radio>
              <el-radio :label="2" :key="2">不退还</el-radio>
            </el-radio-group>
            <div class="upload-tip">优惠券是否退回开关，商品成功退款后，退回/不退回使用的优惠券</div>
          </el-form-item>
          <el-form-item label="售后期限:" prop="afterSalePeriod" class="custom-width-form-item label__label__font">
            <el-input v-model="form.afterSalePeriod" placeholder="请输入售后期限" class="custom-width-input" @input="handleAfterSalePeriodInput"/>
            <div class="upload-tip">订单收货之后，在多少天内可以进行退款，超出天数前端不显示退款按钮，设置0则永远显示</div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
<!--      <el-tab-pane label="规格库存" name="second"></el-tab-pane>
      <el-tab-pane label="商品详情" name="third"></el-tab-pane>
      <el-tab-pane label="物流设置" name="fourth"></el-tab-pane>
      <el-tab-pane label="营销设置" name="fifth"></el-tab-pane>
      <el-tab-pane label="其他设置" name="sixth"></el-tab-pane>-->
    </el-tabs>
  </el-card>
</template>

<script>

import { getOrderConfigureList, saveOrderConfigure } from '@/api/order/configure'

export default {
  name: "Configure",
  data() {
    return {
      activeName: 'first',
      // 遮罩层
      loading: true,
      // 表单参数
      form: {
        consigneeName: null,
        consigneePhone: null,
        consigneeAddress: null,
        consigneeReason: null,
        couponRefundStatus: null,
        afterSalePeriod: null,
      },
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleAfterSalePeriodInput(value) {
      const numericValue = value.slice(0, 8).replace(/[^\d]/g, '');
      // 更新表单数据
      this.form.afterSalePeriod = numericValue;
    },

    handleClick(tab, event) {
      console.log(tab, event);
      this.getList();
    },
    /** 查询订单配置 */
    getList(){
      this.loading = true;
      const merId = this.merId ?? 0;
      getOrderConfigureList(merId).then(response => {
        this.form = response.data;
        this.loading = false;
      });
    },

    async submitForm() {
      if (await this.validateForm()) {
        console.log(this.form);
        saveOrderConfigure(this.form).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getList();
        });
      }
    },
    async validateForm() {
      try {
        return await this.$refs.form.validate();
      } catch (error) {
        console.error('Form validation failed:', error);
        return false;
      }
    },
  }
};
</script>

<style>
.upload-tip {
  color: #999; /* 灰色文字 */
  font-size: 12px; /* 字体大小 */
  text-align: left; /* 文本居中 */
}
/* 或者只为特定 el-form-item 设置宽度 */
.custom-width-form-item {
  width: 500px;
}
/* 也可以直接为 el-input 设置宽度 */
.custom-width-input {
  width: 100%; /* 或者具体像素值 */
}
.el-textarea__inner {
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100px;
  width: 400px;
}

.label__label__font label {
  font-size: 14px;
  font-weight: normal;
}
</style>
